<div id="loginDiv" class="animate form login_form">
	<section class="login_content">
		<form action="javascript:void(0);">
			<h1>Login Form</h1>
			<div>
				<input type="text" v-model="user.userName" class="form-control" placeholder="Username" required="" />
			</div>
			<div>
				<input
					type="password"
					v-model="user.password"
					class="form-control"
					placeholder="Password"
					required=""
				/>
			</div>
			<div>
				<input
						class="form-control input-val"
						type="text"
						v-model="validateCode"
						placeholder="请输入验证码（不区分大小写）"
						style="float: left; width: 65%; margin-bottom: 0px"
				/>
				<canvas id="canvas" @click="draw()" width="100" height="36"></canvas>
			</div>

			<div>
				<a @click="login()" class="btn btn-default submit" href="javascript:void(0);">Log in</a>
				<a class="reset_pass" href="#">Lost your password?</a>
			</div>

			<div class="clearfix"></div>

			<div class="separator">
				<p class="change_link">
					New to site?
					<a href="/register" class="to_register"> Create Account </a>
				</p>

				<div class="clearfix"></div>
				<br />

				<div>
					<h1><i class="fa fa-paw"></i> SFAC</h1>
					<p>Copyright © 2022 JiangHu. All rights reserved. 蜀ICP备 2021031966号-1</p>
				</div>
			</div>
		</form>
	</section>
</div>

<script>
	var loginVue = new Vue({
		el: "#loginDiv",
		data: {
			user: {
				userName: "",
				password: "",
			},
			show_num:[],
			validateCode:"",
		},
		methods: {
			login: function () {
				if (this.user.userName == "" || this.user.password == "") {
					layer.msg("请输入用户名和密码。", { icon: 0 });
					return;
				}
				if (this.validateCode == ""){
					layer.msg("请输入验证码!",{icon:0});
					return;
				}
				if (this.validateCode != this.show_num.join("")){
					layer.msg("验证码错误!",{icon:0});
					return;
				}


				var self = this;
				$.ajax({
					url: "/api/login",
					type: "post",
					contentType: "application/json",
					data: JSON.stringify(self.user),
					success: function (result) {
						if (result.status == 500) {
							layer.msg(result.message, { icon: 0 });
						} else {
							window.location.href = "/test/vueTest";
						}
					},
					error: function (errorMsg) {
						layer.msg(errorMsg.responseText, { icon: 0 });
					},
				});
			},
			//随机颜色
			randomColor:function (){
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," +b + ")";

			},

			// 动态验证码
			draw: function () {
		        var canvas_width=$('#canvas').width();
		        var canvas_height=$('#canvas').height();
				//获取到canvas的对象
		        var canvas = document.getElementById("canvas");
				//获取到canvas画图的环境
		        var context = canvas.getContext("2d");
				canvas.width = canvas_width;
		        canvas.height = canvas_height;
		        var sCode = "A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
		        var aCode = sCode.split(",");
				//获取到数组的长度
		        var aLength = aCode.length;

		        for (var i = 0; i <= 3; i++) {
					//获取到随机的索引值
			           var j = Math.floor(Math.random() * aLength);
					//产生0~30之间的随机弧度
			           var deg = Math.random() * 30 * Math.PI / 180;
					//得到随机的一个内容
			           var txt = aCode[j];
			           this.show_num[i] = txt.toLowerCase();
					//文字在canvas上的x坐标
			           var x = 10 + i * 20;
					//文字在canvas上的y坐标
					   var y = 20 + Math.random() * 8;
			           context.font = "bold 23px 微软雅黑";

					   context.translate(x, y);
			           context.rotate(deg);

			           context.fillStyle =this.randomColor();
			           context.fillText(txt, 0, 0);

			           context.rotate(-deg);
			           context.translate(-x, -y);
		        }
		        for (var i = 0; i <= 5; i++) {
					//验证码上显示线条
			           context.strokeStyle = this.randomColor();
			           context.beginPath();
			           context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
			           context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
			           context.stroke();
		        }
		        for (var i = 0; i <= 30; i++) {
					//验证码上显示小点
			        context.strokeStyle = this.randomColor();
			        context.beginPath();
					var x = Math.random() * canvas_width;
			        var y = Math.random() * canvas_height;
			        context.moveTo(x, y);
			        context.lineTo(x + 1, y + 1);
			        context.stroke();
		        }
	        },



		},
		mounted() {
			this.draw();
		},
	});


</script>
